<template>
	<view class="box">
		<u-navbar :is-back="false" title="分类" title-color="#ffffff" title-size="36" :background="background"
			:border-bottom="false">
		</u-navbar>
		<view class="sousuobox" @click="search">
			<image src="../../static/image/搜索.png" mode=""></image>
			<input type="text" value="" placeholder="搜索内容" />
		</view>
		<!-- 内容部分 -->
		<view class="neirong">
			<view class="leftbox">
				<view :class="leftindex==index?'selectitle':'title'" v-for="(item,index) in leftarr" :key="index"
					@click="leftselect(index)">
					{{item}}
				</view>
			</view>
			<view class="rightbox">
				<view class="topbox">
					<BaseTop :titlelist="titlelist" :current="current" @dianji="dianji"></BaseTop>
				</view>
				<view class="btnbox">
					<BasePingdan v-if="leftindex==0"></BasePingdan>
					<Basexianxia v-else></Basexianxia>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BasePingdan from "../../components/BasePingdan/index.vue"
	import Basexianxia from "../../components/Basexianxia/index.vue"
	import BaseTop from "../../components/BaseTop/index.vue"
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(176deg, rgb(248,73,55),rgb(249,82,64),rgb(250,101,85))'
				},
				leftarr: ["线上商品", "线下商品"],
				leftindex: 0,
				titlelist: [{
					name: "区域",
					flags: false,
					img: false //判断是否要图片
				}, {
					name: "销量",
					flag: true,
					flags: true,
					img: false //判断是否要图片
				}, {
					name: "推荐",
					flag: true,
					flags: true,
					img: false //判断是否要图片
				}, {
					name: "价格",
					flag: false,
					flags: true,
					img: false //判断是否要图片
				}, {
					name: "筛选",
					flags: false, //判断是否要箭头
					img: true //判断是否要图片
				}, ],
				current:0
			}
		},
		methods: {
			// 左边导航栏
			leftselect(v) {
				this.leftindex = v
			},
			// 头部筛选框
			dianji(v) {
				this.titlelist[v].flag = !this.titlelist[v].flag
				this.current = v
			},
			// 搜索
			search(){
				this.jumpLink({link:"/pagesB/search/index"})
			}
		},
		components: {
			BasePingdan,
			Basexianxia,
			BaseTop
		}
	}
</script>

<style scoped lang="scss">
	.box {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #FFF;
		overflow: scroll;

		.sousuobox {
			display: flex;
			align-items: center;
			width: 580rpx;
			height: 64rpx;
			background-color: #f0f0f0;
			border-radius: 32rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
			margin: 20rpx auto;

			image {
				width: 29rpx;
				height: 29rpx;
			}

			input {
				width: 450rpx;
				height: 29rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
			}
		}
	}

	.neirong {
		display: flex;

		// position: relative;
		.leftbox {
			position: fixed;
			bottom: 0;
			left: 0;
			top: 176rpx;
			width: 82rpx;
			border-right: 2rpx solid #e1e1e1;
			z-index: 9999;
			text-align: center;
			font-family: MicrosoftYaHei;
			font-size: 28rpx;
			font-weight: normal;
			letter-spacing: 0rpx;
			background-color: #fff;

			.title {
				padding: 20rpx;
				box-sizing: border-box;
				color: #222222;
				height: 200rpx;
				margin-bottom: 30rpx;
			}

			.selectitle {
				padding: 20rpx;
				box-sizing: border-box;
				color: #f74433;
				height: 200rpx;
				margin-bottom: 30rpx;
				background-color: #feebea;
			}
		}

		.rightbox {
			margin-left: 83rpx;

			.topbox {
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-bottom: 2rpx solid #e1e1e1;
				width: 668rpx;
				height: 74rpx;
				line-height: 74rpx;

				.topselect {
					font-family: SourceHanSansCN-Regular;
					font-size: 28rpx;
					font-weight: normal;
					letter-spacing: 0rpx;
					color: #666666;
				}
			}

			.btnbox {
				position: fixed;
				left: 83rpx;
				bottom: 100rpx;
				right: 0;
				top: 266rpx;
				overflow: scroll;
			}
		}
	}
</style>
